@import './variables.less';

// 按钮组件
.btn {
  .btn-base();

  // 按钮尺寸
  &.btn-sm {
    padding: @spacing-xs @spacing-sm;
    font-size: @font-size-sm;
  }

  &.btn-lg {
    padding: @spacing @spacing-md;
    font-size: @font-size-md;
  }

  // 按钮变体
  &.btn-primary {
    .btn-primary();
  }

  &.btn-success {
    .btn-success();
  }

  &.btn-danger {
    .btn-danger();
  }

  &.btn-secondary {
    .btn-secondary();
  }

  &.btn-outline {
    background: transparent;
    border: 2px solid @primary-color;
    color: @primary-color;

    &:hover {
      background: @primary-color;
      color: @text-white;
    }
  }

  // 按钮状态
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
  }

  &.loading {
    position: relative;
    color: transparent;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }
}

// 卡片组件
.card {
  .card();

  &.card-hover {
    .card-hover();
  }

  &.card-compact {
    padding: @spacing;
  }

  &.card-large {
    padding: @spacing-xl;
  }

  .card-header {
    padding-bottom: @spacing;
    margin-bottom: @spacing;
    border-bottom: 1px solid @border-light;

    h3 {
      margin: 0;
      color: @text-primary;
      font-size: @font-size-lg;
      font-weight: @font-weight-semibold;
    }
  }

  .card-body {
    color: @text-secondary;
    line-height: @line-height-normal;
  }

  .card-footer {
    padding-top: @spacing;
    margin-top: @spacing;
    border-top: 1px solid @border-light;
    display: flex;
    justify-content: flex-end;
    gap: @spacing-sm;
  }
}
